<script setup lang="ts">
// import { zhCn } from 'element-plus/es/locale'; // 我这边使用该导入方法会报错，说不存在这个文件，所以用了下面的方法导入
import { log } from 'console';
import { zhCn } from '../node_modules/element-plus/es/locale';
import { computed, defineComponent, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

// const route = useRoute();
// const maintainStyle = ref<string>();
// const getclass = () => {
//   // console.log(currentPath.value);
//   if (currentPath.value == '/') {
//     maintainStyle.value = 'display: flex; height: calc(100vh - 3px - var(--ep-font-line-height-primary));';
//   } else {
//     maintainStyle.value = 'display: flex; height: calc(100vh - var(--ep-menu-item-height) - 3px - var(--ep-font-line-height-primary));';
//   }
// };

// const currentPath = ref<String>('/');
// // 监听路由的变化，因为直接获取App.vue的路由，获取的是/
// watch(
//   () => route.path,
//   (newPath, oldPath) => {
//     currentPath.value = newPath;
//     getclass();
//     console.log("old:" + oldPath + "new:" + newPath);
//   }
// );

// getclass();
</script>

<template>
  <!-- 设置中文，不然分页插件显示的是英文 -->
  <el-config-provider namespace="ep" :locale="zhCn">
    <!-- <router-link :to="{name:'login'}">登录</router-link> -->
    <BaseHeader v-if="$route.name != 'login'" />
    <!-- <div :style="maintainStyle"> -->
    <div class="flex">
    <!-- <div class="flex main-container-menu"> -->
      <BaseSide v-if="$route.name != 'login'" />
      <!-- 上面的div设置了flex属性，所以默认下面的元素都是flex，也就是左右结构，所以加了个div；flex-grow: 1就是宽度占满 -->
      <!--  width: 90vh; 是为了菜单展开和折叠的时候不出现横向滚动条，可以自适应页面 -->
      <div style="text-align: center; flex-grow: 1; width: 90vh;">
        <!-- 加上router-view才会通过url跳转到页面 -->
        <!-- :key="$route.fullPath多路由复用同一个页面，vue缓存时如果发现组件相同，则会认为是同一个，加上key不同就会认为是不同的东西，分别进行缓存 -->
        <router-view :key="$route.fullPath"></router-view>
      </div>
    </div>
    <!-- 备案号 -->
    <el-link href="https://beian.mps.gov.cn/#/query/webSearch?code=42011202002480" rel="noreferrer" target="_blank" style="margin-right: 15px;">
      <img src="/src/assets/备案图标.png" style="height: calc(var(--ep-font-line-height-primary) - 1px);"/>鄂公网安备42011202002480号
    </el-link>
    <el-link href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备2024067448号-2</el-link>
  </el-config-provider>
</template>

<style>
#app {
  /* position: relative; */
  /* width: 100%; */
  /* height: 100vh; */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  text-align: center;
  color: var(--ep-text-color-primary);
}

.main-container-login {
  /* 
  设置main-container的高度，减去备案号的高度，否则页面会有一个滚动条
  */
  height: calc(100vh - 3px - var(--ep-font-line-height-primary));
}

.main-container-menu {
  /* 
  设置main-container的高度，减去备案号的高度，否则页面会有一个滚动条
  */
  height: calc(100vh - var(--ep-menu-item-height) - 3px - var(--ep-font-line-height-primary));
}
</style>
